<template>

    <div style="position: fixed; top: 0; width: 100%">
        <van-search
            v-model="searchKeyword"
            shape="round"
            @search="onSearch(searchKeyword)"
            background="linear-gradient(to right, #f5b1b8, #f1929d)"
            placeholder="请输入搜索关键词"
        />
    </div>

    <div style="height: 50px"></div>


    <div class="title">大家都在搜</div>

    <div class="label-container">
        <label-max @click="onSearch(item)" v-for="item in keyword.data" :key="item" :text="item"></label-max>
    </div>

    <div class="title">漫画分区</div>

    <div class="btn-container">

        <home-btn v-for="item in dataOne.data" :message="item" :key="item.id"></home-btn>
        <home-btn-plus v-for="item in dataTwo.data" :message="item" :key="item.id"></home-btn-plus>
        <div style="height: 300px"></div>
    </div>
    <van-overlay v-model:show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>
</template>

<script>

import {onMounted, reactive, ref} from "vue";
import {_getMainPage, _getKeyword} from "@/apis/mainPageAPI";
import homeBtn from "@/components/main/part/homeBtn";
import homeBtnPlus from "@/components/main/part/homeBtnPlus";
import labelMax from "@/components/main/part/labelMax";
import router from "@/router";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "home",
    components: {
        homeBtn,
        homeBtnPlus,
        labelMax
    },
    activated() {
        console.log("home is act")
    },
    deactivated() {
        console.log("home is deact")
    },
    setup() {

        const showToast = ref(true)

        let searchKeyword = ref('')

        let dataOne = reactive({
            data: []
        })

        let dataTwo = reactive({
            data: []
        })

        let keyword = reactive({
            data: []
        })

        function getKeyword() {
            _getKeyword('',res => {
                keyword.data = res.data.data.keywords
            },()=>{
                console.log("获取大家都在搜关键词失败")
            })
        }

        async function getMainPage() {
            showToast.value = true
            await _getMainPage('', res => {
                console.log(res.data)
                if (res.data.message == "success") {
                    for (let i = 0; i < 48; i++) {
                        if (i < 12) {
                            dataOne.data.push(res.data.data.categories[i])
                        } else {
                            dataTwo.data.push(res.data.data.categories[i])
                        }
                    }
                } else {
                    router.push({path: '/'})
                    alert("登陆过期，请返回重新登陆")
                }
                showToast.value = false
            },()=>{
                showToast.value = false
                alert("获取主页失败")
            })
        }

        function onSearch(value) {
            router.push({path: '/comicSearch', query: {keyword: value}})
        }

        onMounted(() => {
            getKeyword()
            getMainPage()
        })

        return {
            showToast,
            dataOne,
            dataTwo,
            keyword,
            searchKeyword,
            onSearch,
        }
    }
}
</script>

<style scoped>
.btn-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-flow: row-reverse wrap;
}

.label-container {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    flex-flow: row-reverse wrap;
}

.title {
    margin: 10px;
    font-size: 40px;
    color: #f1929d;
}
</style>